<%@ page contentType="text/html; charset=UTF-8" language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %> 


<script>

function query(){	
	chkValue = new Array();
	$.post("${appPath}/admin/user/select.htm",$('#QueryForm').serialize(),function(data){
		$("#list").html(data);
	});
}

function pageTo(n){
	$('#nowPage').val(n);
	$.post("${appPath}/admin/user/select.htm",$('#_QueryForm').serialize(),function(data){
		$("#list").html(data);
		
		$('.chk_sn').each(function(){
			for(var i=0;i<chkValue.length;i++){
				if(this.value == chkValue[i].value){
					 $(this).attr("checked", true);
					 continue;
				}			
			}
		});
		var isChkAll = true;
		$('.chk_sn').each(function(){
			if( $(this).attr('checked')==undefined)
				isChkAll = false;
		});		
		$("#chkAll").attr("checked", isChkAll);
	});
}

var chkValue = new Array();

function checkedSelected(obj){
	$("#checkboxes").fadeIn("slow");	
	if(obj.value != 'all'){
		if (obj.checked){
			chkValue[chkValue.length] = obj;
		}else{		
			for(var i=0;i<chkValue.length;i++)
				if(chkValue[i].value == obj.value){
					chkValue.splice(i,1);
					break;
			}
		}	
		$("#chkNumber").html(chkValue.length);
	}else{
		if (obj.checked){
			$('.chk_sn').each(function(){			
				if($(this).attr("checked")==undefined){
					chkValue[chkValue.length] = this;				
				}
				$(this).attr("checked", true);
			});
		}else{
			$('.chk_sn').each(function(){			
				if($(this).attr("checked")== 'checked'){
					for(var i=0;i<chkValue.length;i++)
						if(chkValue[i].value == $(this).val()){
							chkValue.splice(i,1);
							break;
					}
					$(this).attr("checked", false);
				}
			});
		}		
		$("#chkNumber").html(chkValue.length);
	}
	if(chkValue.length == 0)
		$("#checkboxes").fadeOut("slow");
}

function testValue(){
	var item = "";
	for(var i=0;i<chkValue.length;i++)
		item += chkValue[i].value + ",";
	//alert(item);
}

function calcelAll(){	
	$('.chk_sn').each(function(){			
		$(this).attr("checked", false);
	});
	$("#chkAll").attr("checked", false);	
	chkValue = new Array();
	$("#chkNumber").html("0");
	$("#checkboxes").fadeOut("slow");
	showMessage("用戶刪除成功",6);
}

function delSelected(){
	var item = "";
	for(var i=0;i<chkValue.length;i++)
		item += chkValue[i].value + ",";
	
	if(chkValue.length > 0){
		$.post("${appPath}/admin/user/del.htm",{seq_noArr:item},function(data){
			$('#nowPage').val(1);
			$.post("${appPath}/admin/user/select.htm",$('#_QueryForm').serialize(),function(data){
				$("#list").html(data);
				calcelAll();
			});
		});
	}		
}

function del(seq_no){	
	$.post("${appPath}/admin/user/del.htm",{seq_noArr:seq_no},function(data){
		var totalRows = $('#totalRows').val() - 1;
		$('#totalRows').val(totalRows);
		$.post("${appPath}/admin/user/select.htm",$('#_QueryForm').serialize(),function(data){
			$("#list").html(data);
			calcelAll();
		});
	});			
}

function toModify(seq_no){	
	$("#dsp_fullname_" + seq_no).hide();
	$("#mdy_fullname_" + seq_no).show();
	$("#dsp_email_" + seq_no).hide();
	$("#mdy_email_" + seq_no).show();
	$("#mode_default_" + seq_no).hide();
	$("#mode_mdy_" + seq_no).show();
	$("#dsp_role_" + seq_no).hide();
	$("#mdy_role_" + seq_no).show();	
	$("#tr_" + seq_no).css({"background-color":"#3B5998",color:"#D8DFEA"});
}

/** 放棄修改 **/
function discardChanges(seq_no){
	$("#dsp_fullname_" + seq_no).show();
	$("#mdy_fullname_" + seq_no).hide();
	$("#dsp_email_" + seq_no).show();
	$("#mdy_email_" + seq_no).hide();
	$("#mode_default_" + seq_no).show();
	$("#mode_mdy_" + seq_no).hide();	
	$("#dsp_role_" + seq_no).show();
	$("#mdy_role_" + seq_no).hide();	
	$("#tr_" + seq_no).css({"background-color":"#efefef",color:"#000000"});
}

/** 放棄修改 **/
function modifyComplete(seq_no){
	$("#dsp_fullname_" + seq_no).html($("#fullname_" + seq_no).val()).show();
	$("#mdy_fullname_" + seq_no).hide();	
	$("#dsp_email_" + seq_no).html($("#email_" + seq_no).val()).show();
	$("#mdy_email_" + seq_no).hide();	
	$("#mode_default_" + seq_no).show();
	$("#mode_mdy_" + seq_no).hide();	
	$("#dsp_role_" + seq_no).show();
	$("#mdy_role_" + seq_no).hide();	
	$("#tr_" + seq_no).css({"background-color":"#efefef",color:"#000000"});
}

function modify(seq_no){
	var rItems = "";
	var rItemsDesc = "";
	$('.role_' + seq_no).each(function(){
		if($(this).prop("checked")){
			rItems += this.value.split(",")[0] + ",";
			rItemsDesc += this.value.split(",")[1] + "<br/>";			
		}
	});
	var f = document.getElementById("UsersForm");
	f.seq_no.value = seq_no;
	f.fullname.value = $("#fullname_" + seq_no).val();
	f.email.value = $("#email_" + seq_no).val();
	f.roleItems.value = rItems;	
	$.post("${appPath}/admin/user/modify.htm",$('#UsersForm').serialize(),function(data){
		modifyComplete(seq_no);
		showMessage("用戶修改成功",5);
		$("#dsp_role_" + seq_no).html(rItemsDesc);		
	});
}

</script>

<div id="page">
	<div id="page-bgtop">
		<div id="page-bgbtm">
			<div id="content">
				<div class="post">
				<!--  
					<h2 class="title inner">用戶查詢／修改／刪除</h2>					
					<div style="clear: both;">&nbsp;</div>
				-->
					<div class="entry">
						
						<form:form method="post" modelAttribute="QueryForm" action="${appPath}/admin/users/select.htm" >
							<table style="width:380px;" > 
								<tr>
									<td style="width: 310px;" valign="bottom">
										<form:input path="qr_str" cssClass="bar_1" cssStyle="padding-top:2px;padding-left:5px;width:300px;font-size:16px;color: black;"/>									
									</td> 
									<td style="width: 70px;">
										<span class="button" style="width:60px;padding:4px;" onclick="query();">查　詢</span> 	
									</td>
								</tr>							
							</table>
						</form:form>
						
						<div id="list" style="padding-top: 20px;"></div>	
					</div>
				</div>

			</div>
			
			<!-- end #content -->			
			<%@ include file="/WEB-INF/jsp/common/submenu01.jsp" %>			
			<div style="clear: both;">&nbsp;</div>
		</div>
	</div>
</div>
<!-- end #page -->

<table style="width:100%">
	<tr>
		<td>
			<div id="checkboxes" class="boxes" style="position:fixed;right:68%;top:260px;z-index:99;background-color: #EBEEF4;height: 50px;border-style:solid;border-width:1px;border-color: #BBC1CE ;display:none">
				<table style="font-size: 16px;color: white;width:100%;">
					<tr>
						<td style="text-align: left;padding-right:5px;padding-left:5px;">							
							<span style="color: blue;font-family: Kozuka Gothic Pr6N B; text-decoration:underline;padding-right:10px;padding-left:5px;" id="chkNumber"></span>							
							<!--  
								<span class="button_2" style="padding:4px;" onclick="query();">全部取消</span>  
								<img src="${appPath }/resource/image/checkbox_yes.png" />
							-->
							<span class="button_1" style="padding:4px;" onclick="calcelAll();">取　消</span>
							<span class="button_2" style="padding:4px;" onclick="delSelected();">刪　除</span>
							<!-- <span class="button_2" style="padding:4px;" onclick="testValue();">TEST</span> -->
						</td>
					</tr>
				</table>
			</div>		
		</td>
	</tr>		
</table>